<template>
  <div :style="{height: pHeight + 'px'}" class="index-page">
    <div class="title">{{title}}</div>
    <div class="title">{{desc}}</div>
    <div class="joke" v-for="(item,index) in joke" :key="index">{{index + 1 + " : " +item.content}}</div>
    <div class="btn">
      <van-button type="danger" size="large" @click="switchLanguage">{{ $t('sys.btnText1') }}</van-button>
    </div>
    <div class="btn-1">
      <van-button type="danger" size="large" @click="sendRequest(1)">{{ $t('sys.btnText2') }}</van-button>
    </div>
    <div class="btn-2">
      <van-button type="danger" size="large" @click="sendRequest(4)">{{ $t('sys.btnText3') }}</van-button>
    </div>
     <div class="space">
    </div>
  </div>
</template>
<script>
import { Button } from "vant";
import { chat,test } from "utils/api.js";
import { requestAll,requestAny } from "utils/request.js";
export default {
  data() {
    return {
      title: "this is vant-h5 template",
      pHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      desc: "",
      joke: []
    };
  },
  components: {
    [Button.name]: Button
  },
  methods: {
    switchLanguage: function() {
      console.log(this.$i18n.locale);
      this.$i18n.locale = this.$i18n.locale == "hk" ? "us" : "hk";
    },
    sendRequest: function(i) {
      if (i > 1) {
        requestAll([
          chat("笑话"),
          chat("笑话"),
          chat("笑话"),
          test("天气")
        ]).then(res => {
          console.log(res)
        })
      } else {
        chat("北京天气").then(res => {
          console.log(res);
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.index-page {
  width: 375px;
  overflow-y: scroll;
  .title {
    width: 100%;
    text-align: center;
  }
  .btn {
    width: 100%;
    position: fixed;
    bottom: 0px;
  }
  .btn-1 {
    width: 100%;
    position: fixed;
    bottom: 51px;
  }
  .btn-2 {
    width: 100%;
    position: fixed;
    bottom: 103px;
  }
  .space {
    height: 150px;
  }
}
</style>